<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tao</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            background-color: #F5F5F5;
        }
        .A1{
            height: 70px;
            background: #ffffff;
        }
		.a1{
			margin-top: 20px;
			float: left;
			margin-left: 20px;
			font-size: 20px;
		}
		.A1 .a2 li{
			float: left;
			margin-top: 20px;
			margin-left: 20px;
			font-size: 20px;
			width: 30px;
			height: 30px;
			background: yellow;
			border-radius: 50% ;
			text-align: center;
		}
        .A2{
            width: 1212px;
            height: 520px;
            margin: auto;
            margin-top: 27px;
        }
        .a21{
            width: 924px;
            height: 520px;
            float: left;
			position: relative;
        }
		.ppp{
			width: 924px;
			position: absolute;
			left:0px;
			bottom: 0px;
			font-size: 25px;
			background: #4D4D4D;
			background: ragb(0,0,0,0.5) ;
			color: #FFFFFF;
		}
		.p{
			width: 275px;
			position: absolute;
			left:0px;
			bottom: 0px;
			font-size: 20px;
			background: #4D4D4D;
			background: ragb(0,0,0,0.5) ;
			color: #FFFFFF;
		}
		.pp{
			width: 275px;
			position: absolute;
			left:0px;
			bottom: 0px;
			font-size: 20px;
			background: #4D4D4D;
			background: ragb(0,0,0,0.5) ;
			color: #FFFFFF;
		}
		.pppp{
			width: 275px;
			position: absolute;
			left:0px;
			bottom: 0px;
			font-size: 20px;
			background: #4D4D4D;
			background: ragb(0,0,0,0.5) ;
			color: #FFFFFF;
		}
        .a22{
            width: 275px;
            height: 520px;
            background: darkcyan;
            float: left;
            margin-left: 10px
        }
        .a221{
            width: 275px;
            height: 166px;
            background: red;
			position: relative;
        }
        .a221 img{
            width: 275px;
            height: 166px;
			
        }
        .a222{
            width: 275px;
            height: 166px;
            background: red;
            margin-top: 11px;
			position: relative;
        }
		.a222 img{
		    width: 275px;
		    height: 166px;
		}
        .a223{
            width: 275px;
            height: 166px;
            background: red;
            margin-top: 11px;
			position: relative;
        }
		.a223 img{
		    width: 275px;
		    height: 166px;
		}
        .A3{
            width: 1212px;
            height: 38px;
            margin: auto;
            margin-top: 27px;
        }
		.A3 .a31{
			width: 125px;
			height: 32px;
			color: red;
			padding-top:5px;
			padding-left: 3px;
			border: 1px solid red;
		}
		.A3 .a32{
			padding-top:5px;
			padding-left: 3px;
		}
		.A3 li{
			width: 125px;
			height: 32px;
			border: 1px solid;
			margin-left: 18px;
			float: left;
		}
		.A3 p{
			margin-left: 18px;
			float: left;
		}
		.A3 select{
			width: 132px;
			height: 35px;
		}
        .A4{
            width: 1212px;
            height: 970px;
            margin: auto;
            margin-top: 27px;
        }
		.A4 ul{
			width: 1212px;
			height: 315px;
			margin-top: 13px;
		}
		.A4 .a41 li{
			width: 295px;
			height: 315px;
			background: #FFFFFF;
			float: left;
			margin-right: 8px;
		}
		.A4 .a42 li{
			width: 295px;
			height: 315px;
			background: #FFFFFF;
			float: left;
			margin-right: 8px;
		}
		.A4 .a43 li{
			width: 295px;
			height: 315px;
			background: #FFFFFF;
			float: left;
			margin-right: 8px;
		}
		.A4 img{
			width: 295px;
			height: 195px;
		}
		.A4 .a411{
			margin-right: 0px;
		}
        .A5{
            width: 1212px;
            height: 30px;
            background: #FFFFFF;
			padding-top: 13px;
            text-align: center;
            margin: auto;
            margin-top: 19px;
        }
        .A6{
            width: 1212px;
            height: 282px;
            margin: auto;
            margin-top: 75px;
        }
		.A6 li{
			float: left;
			margin-left: 20px;
			margin-top: 80px;
		}
    </style>
</head>
<body>
    <div class="A1">
		<div class="a2">
			<p class="a1">三</p>
			<ul>
				<li>赞</li>
				<li>萌</li>
				<li>哈</li>
				<li>艹</li>
				<li>买</li>
			</ul>
		</div>
		
	</div>
    <div class="A2">
        <div class="a21">
        <img src="images/s003.jpg" alt="">
		<span class="ppp">
			Brand 100:设计成就品牌
		</span>
        </div>
        <div class="a22">
            <ul>
            <li class="a221"><img src="images/s02.jpg" alt="">
				<span class="pp">
					想点亮圣诞气氛？试试这个驯鹿灯
				</span>
			</li>
            <li class="a222"><img src="images/s03.jpg" alt="">
				<span class="p">
					Brand 100:设计成就品牌
				</span>
			</li>
            <li class="a223"><img src="images/s04.jpg" alt="">
				<span class="pppp">
					Brand 100:设计成就品牌
				</span>
			</li>
            </ul>
        </div>
    </div>
    <div class="A3">
		<ul>
			<li class="a31">最新</li>
			<p>
			<select>
				<option value ="">最热</option>
			</select>
			</p>
			<p>
			<select>
				<option value ="">热议</option>
			</select>
			</p>
			<li class="a32">随机</li>
		</ul>
	</div>
    <div class="A4">
		<ul class="a41">
			<li><img src="images/i01.jpg" >用水才能擦去笔迹，它只想保护好设计师的创意</li>
			<li><img src="images/i02.jpg" >马桶刷也有优雅的姿态</li>
			<li><img src="images/i03.jpg" >健身也走科技范，你以为这仅仅是只是个瑜伽垫？</li>
			<li class="a411"><img src="images/i04.jpg" >牙缝清洁怎么办？牙刷牙线都过时了，用刷子吧</li>
		</ul>
		<ul class="a42">
			<li><img src="images/i05.jpg" >矮怎么了？照样能拿到书架顶端的书</li>
			<li><img src="images/i06.png" >这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</li>
			<li><img src="images/i07.jpg" >中国国际设计节PK世界工业设计大会，那个更棒？</li>
			<li class="a411"><img src="images/i07.png" >首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</li>
		</ul>
		<ul class="a43">
			<li><img src="images/i08.jpg" >窝在北方的暖炉里，你应该需要一个散热阀门？</li>
			<li><img src="images/i09.jpg" >废纸打造的铅笔，像是一朵朵落入凡间的花</li>
			<li><img src="images/i10.jpg" >倚靠在毯子上，这件事听着就让人舒坦</li>
			<li class="a411"><img src="images/i11.jpg" >别笑话虚拟键盘没有实体按键，打字or音乐，他们说变就能变</li>
		</ul>
	</div>
    <p class="A5">太快了，慢慢来:)</p>
    <div class="A6">
		
		<ul>
			<p>合作伙伴</p>
			<li><img src="images/x01.png" ></li>
			<li><img src="images/x02.png" ></li>
			<li><img src="images/x03.png" ></li>
			<li><img src="images/x04.png" ></li>
			<li><img src="images/x05.png" ></li>
			<li><img src="images/x06.png" ></li>
			<li><img src="images/x07.jpg" ></li>
		</ul>
		
	</div>
</body>
</html>